.marquee {
  --gradient-width: 20px;

  position: relative;
  overflow: hidden;
  white-space: nowrap;

  // mask-image: linear-gradient(
  //   to right,
  //   rgba(0, 0, 0, 1) calc(100% - var(--gradient-width)),
  //   rgba(0, 0, 0, 0) 100%
  // );
}

.marquee.overflow {
  mask-image: linear-gradient(
    to right,
    rgb(0 0 0 / 0%) 0%,
    rgb(0 0 0 / 100%) var(--gradient-width),
    rgb(0 0 0 / 100%) calc(100% - var(--gradient-width)),
    rgb(0 0 0 / 0%) 100%
  );

  .text {
    &::before,
    &::after {
      // padding-right: var(--gradient-width);
      // padding-left: var(--gradient-width);
      animation: text-animation linear infinite;
      animation-duration: var(--count, 1s);
      animation-play-state: running;

      // animation-play-state: paused;
    }

    &::after {
      margin-left: 2em;
      content: attr(data-text);
    }
  }

  &:hover {
    .text {
      &::before,
      &::after {
        // animation-play-state: running;
      }
    }
  }
}

.text {
  width: fit-content;

  &::before,
  &::after {
    display: inline-block;
  }

  &::before {
    content: attr(data-text);
  }
}

@keyframes text-animation {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-100% - 2em));
  }
}
